<template>
  <div class="tool-complex">
    <eharts-option :config="config" :option="option"></eharts-option>
  </div>
</template>

<script>
import mixins from "../mixin";
export default {
  name: "tool-echart-pie",
  mixins: [mixins],
  computed: {
    option() {
      const _this = this;
      const gridData = this.tableData;
      let series = [];
      try {
        // console.log(gridData);
        gridData.yData.forEach((ydata, index) => {
          series.push({
            data: gridData.valueData[index],
            type: ydata.type,
            name: ydata.name,
            barWidth: _this.attr.barWidth, // 固定柱子宽度 barMaxWidth: 30
            showBackground: _this.attr.showBackground, // 显示背景
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
            itemStyle: {
              color: _this.attr.linearGradientShow
                ? _this.$methods.gradientReturnString(
                    "echart",
                    _this.attr.linearGradient
                  )
                : this.attr.colors[index],
              borderRadius: [_this.attr.barRadius, _this.attr.barRadius, 0, 0],
            },
            label: {
              show: _this.attr.labelShow, // 显示数值
              position: "outside", // 显示位置
              color: _this.attr.labelColor,
              fontSize: _this.attr.labelSize,
            },
          });
        });
      } catch (error) {
        console.log(error);
      }
      return {
        title: {
          text: "饼状图",
          left: "left",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          top: 40,
          left: 0,
          orient: "vertical",
          data: ["可口可乐", "百事可乐", "美年达", "农夫山泉"],
        },
        series: [
          {
            name: "饮品",
            type: "pie",
            radius: [20, "70%"],
            center: ["50%", "50%"],
            roseType: "radius",
            itemStyle: {
              borderRadius: 5,
            },
            label: {
              show: true,
            },
            emphasis: {
              label: {
                show: true,
              },
            },
            data: [
              {
                value: 40,
                name: "可口可乐",
                itemStyle: {
                  //  线性渐变方式一 ======================================================
                  // LinearGradient前四个分参数别代表右，下，左，上，数值0-1
                  color: this.$methods.gradientReturnString(
                    "echart",
                    this.attr.linearGradient
                  ),
                  //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  //     {
                  //       offset: 0,
                  //       color: "rgba(255,174,19,0.7)",
                  //     },
                  //     {
                  //       offset: 1,
                  //       color: "rgba(255,174,19,0.05)",
                  //     },
                  //   ]),
                },
              },
              {
                value: 35,
                name: "百事可乐",
                itemStyle: {
                  //  径向渐变方式一 ======================================================
                  // RadialGradient前三个分参数别代表圆心（x,y），半径（数值0-1）
                  color: this.$methods.gradientReturnString(
                    "echart",
                    this.attr.linearGradient
                  ),
                },
              },
              {
                value: 33,
                name: "美年达",
                itemStyle: {
                  //  线性渐变方式二 ======================================================
                  // x,y,x2,y2数值同LinearGradient前四个参数分别代表右，下，左，上，数值0-1
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(60,216,208,0.7)", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "rgba(60,216,208,0.05)", // 100% 处的颜色
                      },
                    ],
                    global: false, // 缺省为 false
                  },
                },
              },
              {
                value: 28,
                name: "农夫山泉",
                itemStyle: {
                  //  径向渐变方式二 ======================================================
                  // x 0.5 y 0.5 代表圆心，r 代表半径
                  color: {
                    type: "radial",
                    x: 0.5,
                    y: 0.5,
                    r: 0.9,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(82,216,60, 0.7)", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "rgba(82,216,60, 0.05)", // 100% 处的颜色
                      },
                    ],
                    global: false, // 缺省为 false
                  },
                },
              },
            ],
          },
        ],
        // // 自定义标题
        // title: {
        //   show: this.attr.titleShow,
        //   text: this.attr.title,
        //   textStyle: {
        //     color: this.attr.fontColor,
        //     fontWeight: this.attr.fontWeight,
        //     fontSize: this.attr.fontSize,
        //   },
        //   padding: [16, 16],
        //   itemGap: 6, //主副标题之间的间距
        //   left: "left", // 100、'left'、'right'、'center'
        // },
        // // 图例
        // legend: {
        //   padding: 16,
        //   show: this.attr.legendShow,
        //   textStyle: {
        //     color: this.attr.legendColor,
        //     fontWeight: 800,
        //     fontSize: this.attr.legendSize,
        //   },
        //   formatter: function (name) {
        //     return name;
        //   },
        //   padding: [16, 16],
        //   left: "right",
        //   top: "auto",
        //   orient: this.attr.orient, // 'horizontal'、'vertical'
        //   icon: "roundRect", // 'circle'、'rect'、'roundRect'
        //   itemHeight: 16,
        // },
        // // 区域缩放
        // dataZoom: {
        //   show: false,
        // },
        // tooltip: {
        //   show: true,
        //   trigger: "item",
        //   appendToBody: true,
        //   formatter: "{a}<br />{b}: {c}kg",
        //   backgroundColor: "rgba(50,50,50,0.7)",
        //   borderColor: "rgba(50,50,50,0.7)",
        //   textStyle: {
        //     color: "#fff",
        //     fontSize: 14,
        //   },
        // },
        // // 距离四周的距离(单位：px)
        // grid: {
        //   left: 16,
        //   right: 16,
        //   top: 64,
        //   bottom: 0,
        //   containLabel: true,
        // },
        // // X轴配置
        // xAxis: {
        //   name: "月份",
        //   nameTextStyle: {
        //     fontSize: 14,
        //   },
        //   type: "category",
        //   data: gridData.xData,
        //   axisLine: {
        //     show: true,
        //     lineStyle: {
        //       color: "#eee",
        //       width: 1,
        //       type: "solid",
        //     },
        //   },
        //   axisLabel: {
        //     show: true,
        //     interval: "auto",
        //     color: function (value, index) {
        //       return _this.attr.axisColor;
        //     },
        //     fontSize: this.attr.axisSize,
        //     rotate: this.attr.rotateX, //旋转角度
        //     formatter: function (value, index) {
        //       return value;
        //     },
        //   },
        // },
        // // Y轴配置
        // yAxis: {
        //   // name: "数值 (单位：%)",
        //   nameTextStyle: {
        //     color: "#000",
        //     fontSize: 14,
        //   },
        //   nameRotate: 0,
        //   type: "value",
        //   axisLine: {
        //     show: false,
        //     lineStyle: {
        //       color: "#ddd",
        //       width: 1,
        //       type: "solid",
        //     },
        //   },
        //   axisLabel: {
        //     show: true,
        //     interval: "auto",
        //     color: function (value, index) {
        //       return _this.attr.axisColor;
        //     },
        //     fontSize: this.attr.axisSize,
        //     rotate: this.attr.rotateY,
        //   },
        //   // min: function (value) {
        //   //   return 0;
        //   // },
        //   max: function (value) {
        //     return value.max * 1.5;
        //   },
        //   triggerEvent: false,
        // },
        // series: series,
      };
    },
  },
  data() {
    return {
      tableData: {
        xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        yData: [
          { type: "bar", name: "First" },
          { type: "bar", name: "Secound" },
        ],
        valueData: [
          [320, 200, 150, 80, 70, 110, 130],
          [150, 260, 100, 180, 150, 56, 245],
        ],
      },
      attr: null,
    };
  },
  pageData: {
    version: "0.0.2",
    name: "tool-echart-pie",
    title: "饼状图",
    count: 0,
    width: 540,
    height: 360,
    config: {
      label: "饼状图",
      type: "table",
      url: "",
      data: {
        key: "tableData",
        value: {
          xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          yData: [
            { type: "bar", name: "First" },
            { type: "bar", name: "Secound" },
          ],
          valueData: [
            [320, 200, 150, 80, 70, 110, 130],
            [150, 260, 100, 180, 150, 56, 245],
          ],
        },
      },
      axios: {
        type: "get",
      },
      params: {},
      attr: [
        {
          key: "colors",
          title: "颜色主题",
          formType: "color-group",
          group: "basics",
          type: "Array",
          data: [
            "#409eff",
            "#0967F2",
            "#ECF6FD",
            "#609BEF",
            "#67C23A",
            "#E6A23C",
            "#F56C6C",
            "#909399",
          ],
        },
        {
          key: "linearGradientShow",
          title: "启用渐变色",
          formType: "radio-select",
          group: "linear-gradient",
          type: "Boolean",
          data: false,
        },
        {
          key: "linearGradient",
          title: "",
          hidden: false,
          formType: "color-linear-gradient",
          group: "linear-gradient",
          type: "Object",
          data: {
            type: "linear-gradient",
            angle: 45,
            colors: ["#409eff", "#0967F2"],
          },
        },
        {
          key: "labelShow",
          title: "显示数值",
          formType: "radio-select",
          group: "basics",
          type: "Boolean",
          data: false,
        },
        {
          key: "labelColor",
          title: "数值颜色",
          formType: "color-picker",
          group: "basics",
          type: "Boolean",
          data: "#000",
        },
        {
          key: "labelSize",
          title: "数值大小",
          formType: "text-number",
          group: "basics",
          type: "Number",
          data: 16,
        },
        {
          key: "titleShow",
          title: "显示标题",
          formType: "radio-select",
          group: "title",
          type: "Boolean",
          data: false,
        },
        {
          key: "title",
          title: "自定义标题",
          formType: "text-string",
          group: "title",
          type: "String",
          data: "柱状图标题",
        },
        {
          key: "fontColor",
          title: "标题颜色",
          formType: "color-picker",
          group: "title",
          type: "String",
          data: "#000",
        },
        {
          key: "fontWeight",
          title: "标题粗细",
          formType: "text-number",
          group: "title",
          type: "String",
          data: 800,
        },
        {
          key: "fontSize",
          title: "标题大小",
          formType: "text-number",
          group: "title",
          type: "String",
          data: 16,
        },
        {
          key: "legendShow",
          title: "显示图例",
          formType: "radio-select",
          group: "legend",
          type: "Boolean",
          data: true,
        },
        {
          key: "orient",
          title: "图例布局",
          formType: "select-option", // text-string
          group: "legend",
          type: "String",
          data: "horizontal",
          default: [
            {
              label: "水平",
              value: "horizontal",
            },
            {
              label: "垂直",
              value: "vertical",
            },
          ],
        },
        {
          key: "legendSize",
          title: "文字大小",
          formType: "text-number",
          group: "legend",
          type: "String",
          data: 12,
        },
        {
          key: "legendColor",
          title: "文字颜色",
          formType: "color-picker",
          group: "legend",
          type: "String",
          data: "#000",
        },
        {
          key: "axisColor",
          title: "文字颜色",
          formType: "color-picker",
          group: "axis",
          type: "String",
          data: "#000",
        },
        {
          key: "axisSize",
          title: "文字大小",
          formType: "text-number",
          group: "axis",
          type: "String",
          data: 16,
        },
        {
          key: "barWidth",
          title: "柱体宽度",
          formType: "text-string",
          group: "axis",
          type: "String",
          data: "15",
        },
        {
          key: "barRadius",
          title: "柱体圆角",
          formType: "text-number",
          group: "axis",
          type: "String",
          data: 0,
        },
        {
          key: "showBackground",
          title: "显示背景",
          formType: "radio-select",
          group: "axis",
          type: "Boolean",
          data: false,
        },

        {
          key: "rotateX",
          title: "X 轴角度",
          formType: "text-number",
          group: "axis",
          type: "String",
          data: 0,
        },
        {
          key: "rotateY",
          title: "Y 轴角度",
          formType: "text-number",
          group: "axis",
          type: "String",
          data: 0,
        },
      ],
    },
  },
};
</script>

<style scoped lang="scss">
.tool-complex {
  width: 100%;
  height: 100%;
}
</style>

